<template>
    <el-tree 
    :data="data"
    show-checkbox
    node-key="resourceId"
    :default-checked-keys="defaultCheckedKeys"
    default-expand-all
    @check="checkHandler"
    :props="defaultProps"
    />
    <div style="float: right;">
        <el-button type="primary" size="small" @click="submitData()">提交</el-button>
    </div>
</template>

<script setup>

// api
import { getPermission , editPermission } from "@/api/role"
import {ElMessage} from "element-plus";

const defaultProps = {
  children: 'children',
  label: 'label',
}


const props = defineProps({
    roleId: String
})
const emit = defineEmits(["permissionResult"])

let permissionData = {}

const { data : res } = await getPermission(props.roleId)
// console.log("获取的数据：",res.data)
const defaultCheckedKeys = res.data.rolePermission.defaultCheckedKeys
const data = res.data.permissionList
permissionData.resourceIds = res.data.rolePermission.defaultCheckedKeys
permissionData.roleId = props.roleId
// console.log("key",defaultCheckedKeys)
// console.log("data",data)


function checkHandler(str1,str2) {
    // console.log("str1",str1)
    // console.log("str2",str2.checkedKeys)
    permissionData.resourceIds = str2.checkedKeys
    // console.log("data",permissionData)
}

async function submitData() {
    const resData = await editPermission(permissionData)
    console.log("结果：", resData)
    if (resData.code !== 200) {    // 添加不成功
        return
    } else {
        ElMessage({
            message: resData.msg,
            type: "success"
        })
        // 通知父组件
        emit('permissionResult' , 1)
        return;
    }
}


</script>

<style lang="scss" scoped>

</style>